{% extends "base.html" %}

{% block title %}Cron表达式示例 - CronPy Web管理界面{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h2><i class="fas fa-question-circle me-2"></i>Cron表达式示例</h2>
            <a href="{{ url_for('add_task') }}" class="btn btn-primary">
                <i class="fas fa-plus me-1"></i>使用示例创建任务
            </a>
        </div>

        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">PyCron支持标准的6位Cron表达式格式</h5>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <strong>格式说明：</strong> <code>* * * * * *</code><br>
                    <small>秒(0-59) 分(0-59) 时(0-23) 日(1-31) 月(1-12) 周(0-6，0=周日)</small>
                </div>

                {% if examples %}
                    <div class="row">
                        {% for expr, desc in examples %}
                            <div class="col-md-6 mb-3">
                                <div class="card h-100">
                                    <div class="card-body">
                                        <h6 class="card-title">
                                            <code class="text-primary">{{ expr }}</code>
                                        </h6>
                                        <p class="card-text text-muted">{{ desc }}</p>
                                        <button class="btn btn-sm btn-outline-primary" onclick="useExample('{{ expr }}', '{{ desc }}')">
                                            <i class="fas fa-copy me-1"></i>使用此表达式
                                        </button>
                                    </div>
                                </div>
                            </div>
                        {% endfor %}
                    </div>
                {% else %}
                    <div class="text-center py-4">
                        <p class="text-muted">暂无Cron表达式示例</p>
                    </div>
                {% endif %}
            </div>
        </div>

        <!-- 常用表达式速查表 -->
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-table me-2"></i>常用表达式速查表</h5>
            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>频率</th>
                                <th>表达式</th>
                                <th>说明</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>每秒</td>
                                <td><code>* * * * * *</code></td>
                                <td>每秒执行一次</td>
                            </tr>
                            <tr>
                                <td>每分钟</td>
                                <td><code>0 * * * * *</code></td>
                                <td>每分钟的0秒执行</td>
                            </tr>
                            <tr>
                                <td>每小时</td>
                                <td><code>0 0 * * * *</code></td>
                                <td>每小时的0分0秒执行</td>
                            </tr>
                            <tr>
                                <td>每日</td>
                                <td><code>0 0 9 * * *</code></td>
                                <td>每天上午9点执行</td>
                            </tr>
                            <tr>
                                <td>每周</td>
                                <td><code>0 0 9 * * 1</code></td>
                                <td>每周一上午9点执行</td>
                            </tr>
                            <tr>
                                <td>每月</td>
                                <td><code>0 0 9 1 * *</code></td>
                                <td>每月1号上午9点执行</td>
                            </tr>
                            <tr>
                                <td>工作日</td>
                                <td><code>0 0 9 * * 1-5</code></td>
                                <td>工作日(周一到周五)上午9点执行</td>
                            </tr>
                            <tr>
                                <td>每5秒</td>
                                <td><code>*/5 * * * * *</code></td>
                                <td>每5秒执行一次</td>
                            </tr>
                            <tr>
                                <td>每15分钟</td>
                                <td><code>0 */15 * * * *</code></td>
                                <td>每15分钟执行一次</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>

        <!-- 特殊字符说明 -->
        <div class="card mt-4">
            <div class="card-header">
                <h5 class="mb-0"><i class="fas fa-info-circle me-2"></i>特殊字符说明</h5>
            </div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6">
                        <h6>通配符</h6>
                        <ul class="list-unstyled">
                            <li><code>*</code> - 匹配任意值</li>
                            <li><code>?</code> - 不指定值（某些实现支持）</li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <h6>范围和列表</h6>
                        <ul class="list-unstyled">
                            <li><code>1-5</code> - 范围：1到5</li>
                            <li><code>1,3,5</code> - 列表：1或3或5</li>
                            <li><code>*/10</code> - 步长：每10个单位</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 使用示例模态框 -->
<div class="modal fade" id="useExampleModal" tabindex="-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">使用Cron表达式</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <p>表达式: <code id="selectedExpression"></code></p>
                <p id="selectedDescription"></p>
                <p>此表达式将复制到剪贴板，您可以粘贴到任务配置中。</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <a href="{{ url_for('add_task') }}" class="btn btn-primary">
                    <i class="fas fa-plus me-1"></i>创建任务
                </a>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function useExample(expression, description) {
    // 复制到剪贴板
    navigator.clipboard.writeText(expression).then(function() {
        // 更新模态框内容
        document.getElementById('selectedExpression').textContent = expression;
        document.getElementById('selectedDescription').textContent = description;

        // 显示模态框
        new bootstrap.Modal(document.getElementById('useExampleModal')).show();

        // 显示成功提示
        showToast('Cron表达式已复制到剪贴板');
    }).catch(function(err) {
        console.error('复制失败:', err);
        showToast('复制失败，请手动复制表达式');
    });
}

function showToast(message) {
    // 创建临时提示
    const toast = document.createElement('div');
    toast.className = 'toast align-items-center text-white bg-success border-0 position-fixed';
    toast.style.cssText = 'top: 20px; right: 20px; z-index: 9999;';
    toast.innerHTML = `
        <div class="d-flex">
            <div class="toast-body">${message}</div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    `;
    document.body.appendChild(toast);

    // 初始化并显示
    const bsToast = new bootstrap.Toast(toast);
    bsToast.show();

    // 3秒后自动移除
    setTimeout(() => {
        document.body.removeChild(toast);
    }, 3000);
}
</script>
{% endblock %}
